<template>
	<div class="boardBox">
		<div class="backan">
			<!-- <el-icon :size="16" color="#1491FF" title="返回" class="cursor"><ArrowLeft /></el-icon> -->
			<img src="@/assets/back.png" alt="" style="width: 35px; height: 35px; cursor: pointer" @click="router.go(-1)" />
		</div>
		<div class="flex tabheader justify-content-center">
			<div v-if="isDiv1Visible" :class="activeName == 1 ? 'div1 on' : 'div1'" @click="activeName = 1">基础信息</div>
			<div v-if="isDiv2Visible" :class="activeName == 2 ? 'div1 on' : 'div1'" @click="activeName = 2">
				{{ Number(route.query.active) === 2 ? route.query.name + '——' : '' }}编制过程
			</div>
		</div>

		<div class="content">
			<Basic v-if="activeName == 1" :datainfo="list"></Basic>
			<Process v-else :datainfo="list"></Process>
		</div>
	</div>
</template>
<script setup lang="ts">
import { router } from '@/router'
import { onMounted, ref } from 'vue'
import Basic from './components/Basic.vue'
import Process from './components/Process.vue'

import { useRoute } from 'vue-router'
// import { get } from 'sortablejs'
// import { changeStageAndStatus } from '@/api/bianzhi/index'

const route = useRoute()
const list = ref({
	id: route.query.id,
	edit: route.query.edit,
	porprogressStatus: route.query.progressStatus,
	progressStage: route.query.progressStage,
	progressColor: route.query.progressColor,
	isshen: route.query.isshen ? true : false
})

const activeName = ref(Number(route.query.active))
const isDiv1Visible = ref(false)
const isDiv2Visible = ref(false)
const getinfo = ref({})
onMounted(() => {
	if (Number(route.query.active) == 1) {
		isDiv1Visible.value = true
		isDiv2Visible.value = false
	}
	if (Number(route.query.active) == 2) {
		isDiv1Visible.value = false
		isDiv2Visible.value = true
	}
	if (Number(route.query.active) == 0) {
		isDiv1Visible.value = true
		isDiv2Visible.value = true
		activeName.value = 1
	}
	// list.value.id = Number(route.query.id)
	// list.value.edit = route.query.edit,
	// activeName.value = Number(route.query.active)
	// list.value.porprogressStatus = route.query.progressStatus
	// list.value.progressStage = route.query.progressStage
	// getinfo.value=route.query
})
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__label {
	font-size: 15px !important;
}

::v-deep .el-form-item__content {
	font-size: 14px !important;
}

.backan {
	position: absolute;
	top: 20px;
	left: 60px;
	height: 3%;
}

.boardBox {
	display: flex;
	align-items: center;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-around;
	overflow: hidden;
	height: 100%;
	background-color: #fff;

	&::-webkit-scrollbar {
		display: none;
	}

	.tabheader {
		text-align: center;
		width: 100%;
		border-bottom: solid 2px #f0f0f0;
		font-weight: 400;
		font-size: 16px;
		color: #333333;
		line-height: 50px;
		height: 50px;
		cursor: pointer;

		.div1 {
			padding: 0px 40px;
		}

		.on {
			color: #1491ff;
		}
	}

	.content {
		padding: 20px;
		width: 92%;
		overflow: hidden;
	}
}

.boardBox .el-tabs--card>.el-tabs__header {
	width: 80%;
	/* 或者你想要的宽度，这里举例为80% */
}
</style>
